<template>
  <div>
      <div class="search_wrap">
        <el-form inline>
          <el-form-item :label="$t('dept.deptName')">
            <el-input v-model="queryForm.deptName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dept.deptStatus')">
             <el-select style="width: 200px;" v-model="queryForm.status">
                   <el-option value="0" label="正常">正常</el-option>
                   <el-option value="1" label="停用">停用</el-option>
             </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="toSearch" :icon="Search" type="primary">{{$t('common.search')}}</el-button>
             <el-button :icon="Refresh">{{$t('common.reset')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="search_wrap">
        <el-button @click="open()" :icon="Plus" type="primary" plain>{{$t('common.add')}}</el-button>
        <el-button :icon="Sort" plain> {{$t('common.fold')}}</el-button>
      </div>
      <!-- 表格部分 -->
      <div class="table_wrap">
        <el-table border stripe :data="deptList"
         row-key="deptId"
        node-key="deptId"
        :default-expand-all="true"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column :label="$t('dept.deptName')" prop="deptName"></el-table-column>
           <el-table-column :label="$t('dept.deptSort')" prop="orderNum"></el-table-column>
           <el-table-column :label="$t('dept.deptStatus')">
              <template #default="{row}">
                {{row.status=='0'?'正常':'停用'}}
              </template>
           </el-table-column>
           <el-table-column :label="$t('dept.createTime')" prop="createTime">

           </el-table-column>
           <el-table-column :label="$t('common.action')">
              <template #default="{row}">
                    <el-link  type="primary" @click="toEdit(row.deptId)" :icon="Edit">{{$t('common.edit')}}</el-link>
                    <el-link style="margin: 0 10px;" type="primary" :icon="Plus" @click="open(row.deptId)">{{$t('common.add')}}</el-link>
                    <el-link type="primary" @click="toDel(row.deptId)" :icon="Delete">{{$t('common.delete')}}</el-link>
              </template>
             
           </el-table-column>

        </el-table>
      </div>
      <!-- 添加岗位的弹出层 -->
       <addDept @updateList="getList" :parentDept="deptList" ref="addDeptRef"></addDept>
  </div>
</template>
<script setup>
  import {ref,reactive} from 'vue'
  import {Search,Refresh,Plus,Sort,Edit,Delete} from '@element-plus/icons-vue'
  import addDept from './child/addDept.vue'
  import {listDept,delDept} from '@/api/dept'
 import {handleTree} from '@/utils/tool'
  let queryForm=reactive({
    pageNum:1,
    pageSize:10,
    deptName:"" ,//部门名称
    status:"" //部门状态
  })
  let deptList=ref([]) //部门列表
    // 获取部门列表接口
  let getList=async ()=>{
   let res=await listDept(queryForm)
    console.log(res ,'部门列表数据')
    deptList.value=handleTree(res.data ,"deptId","parentId")//存储部门列表数据

  }
  getList()
  // 点击搜索
  let toSearch=()=>{
    getList()
    queryForm.deptName=""
    queryForm.status=""
  }
  let addDeptRef=ref(null)
  let open=(deptId)=>{
    // 通过ref操作子组件的数据  打开弹出层
    addDeptRef.value.deptFlag=true;
    if(deptId){
      addDeptRef.value.addForm.parentId=deptId //如果有id 设置给子组件的上级部门id
    }
  }
  // 父组件点击修改   
  let toEdit=(deptId)=>{
    // 修改部门 打开弹出层 把当前行id传给子组件
    addDeptRef.value.getDeptInfo(deptId)
  }
  // 删除接口
  let toDel=async (deptId)=>{
     let res=await delDept(deptId)
     console.log(res,"删除成功")
     getList();
  }
</script>
<style lang="scss" scope>
  .search_wrap{
    width: 1360px;
    height: 50px;
    margin: 10px auto;
  }
  .table_wrap{
       width: 1360px;
      margin: 10px auto;
  }
</style>